<template>
  <ul>
    <li v-for="item in listStore.list" :key="item.goodsid" @click="State.isSale ? goDetail(item.goodsid) : ''">
      <div class="left">
        <img :src="item.goodNorms[0].photo" alt />
      </div>
      <div class="right">
        <p class="note">{{ item.note }}</p>
        <p>{{ item.buynum }}人已兑换</p>
        <div class="new">
          <p>{{ item.discountprice }}</p>
          <p :id="State.isSale ? '' : 'blue'">{{ State.isSale ? "马上兑" : "未开始" }}</p>
        </div>
        <div class="old">
          <p>{{ item.gprice }}</p>
          <p>
            <span>已兑{{ State.isSale ? Math.ceil(item.buynum / (item.buynum + item.storecount) * 100) + '%' : "0%"
            }}</span>
            <van-progress class="progress" stroke-width="1.333vw" color="#ff5e81" track-color="#999999"
              :show-pivot="false"
              :percentage="State.isSale ? item.buynum / (item.buynum + item.storecount) * 100 : 0" />
          </p>
        </div>
      </div>  
    </li>
  </ul>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { useListStore } from "../../stores/list.js"
import { ref } from "vue";
const listStore = useListStore();
const router = useRouter();
const route = useRoute()
defineProps({
  State: {
    type: Object,
    default: {
      isSale: true,
    }
  }
});

const goodsidd = ref(null)
function goDetail(goodsid) {
  goodsidd.value = goodsid
  router.push({
    path: '/ShopDetail',
    query: {
      id:goodsidd.value
    }
  });
}
function fun() {
  if (route.path === "/ListSon") {
    listStore.getInfo();
  }
}
fun();
</script>

<style scoped>
ul {
  padding: 0 5.333vw;
}

li {
  display: flex;
  border-bottom: 0.133vw solid #ccc;
  padding: 2.667vw 0;
}

.left {
  margin-right: 2.667vw;
}

.left>img {
  width: 33.333vw;
  height: 33.333vw;
}

.right {
  flex: 1;
}

.right>p:nth-child(1) {
  font-size: 4.533vw;
}

.right>p:nth-child(2) {
  font-size: 3.467vw;
  color: #666666;
  line-height: 8vw;
}

.new {
  display: flex;
  justify-content: space-between;
  margin-top: 5.333vw;
}

.new>p:nth-child(1) {
  font-size: 5.067vw;
  color: #ff5e81;
  font-weight: bold;
}

.new>p:nth-child(2) {
  font-size: 3.467vw;
  background: #ff5e81;
  color: white;
  width: 20vw;
  height: 8vw;
  border-radius: 1.333vw;
  text-align: center;
  line-height: 8vw;
}

.old {
  display: flex;
  justify-content: space-between;
  margin-top: 1.333vw;
}

.old>p:nth-child(1) {
  text-decoration: line-through;
  font-size: 3.2vw;
  color: #999999;
}

.old>p:nth-child(2) {
  display: flex;
  align-items: center;
}

.old>p:nth-child(2)> :nth-child(1) {
  font-size: 3.2vw;
  color: #999999;
  margin-right: 2.667vw;
}

.progress {
  width: 20vw;
}

#blue {
  background: #2bcddd;
}

.note {
  width: 53.333vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>